<template>
  <div>
    <el-table
      :data="tableData"
			ref="editTable"
      height="220"
      style="width: 100%"
      :header-cell-style="{ fontSize: '14px' }"
      :cell-style="{ fontSize: '14px' }"
      @row-click="handleRowClick"
    >
      <!-- <el-table-column label="时间" prop="timestamp" ></el-table-column> -->
      <el-table-column label="源IP" prop="src" :width="117"></el-table-column>
      <el-table-column label="目标IP" prop="dst" :width="117"></el-table-column>
      <el-table-column label="描述" prop="content"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      len: 0,
      tableData: [],
      ipList: {},
      originalData: [], // 用于存储原始数据的副本
    };
  },
  methods: {
    async getList() {
      let that = this;
      await that.$axios
        .get("http://10.112.38.20:39898/iplist")
        .then(function (res) {
          that.ipList = res.data;
        });
    },
    getData() {
      // this.tableData = [
      //     { timestamp: '21:49:33.166517740', sourceIP: '10.233.60.100', targetIP: '10.233.70.122', protocol: 'NGAP', length: '134', description: 'NGSetupRequest' },
      //     { timestamp: '21:49:33.168101239', sourceIP: '10.233.70.122', targetIP: '10.233.60.100', protocol: 'NGAP', length: '110', description: 'NGSetupResponse' },
      //     // Add more rows as needed
      // ];
      let that = this;
      that.$axios
        .get("http://10.112.38.20:39898/signal/upf1")
        .then(function (res) {
          that.tableData = res.data;
          // console.log(res.data)
          // this.tableData = res.data;
        });
    },
    getAppendData() {
      let that = this;
      that.$axios
        .get("http://10.112.38.20:39898/signal/upf1", {
          params: {
            idx: that.len,
          },
        })
        .then(function (res) {
          var data = res.data;
          that.len = that.len + data.length;
          function pushDataAndSleep(index) {
            if (index < data.length) {
              // 将数据推送到数组
              that.tableData.push(data[index]);

              // 更新滚动条到底部
              var leng = 200 * that.tableData.length;
              that.$refs.editTable.$refs.scrollBarRef.setScrollTop(leng);

              // 设置延时，然后递归调用以处理下一条数据
              setTimeout(function () {
                pushDataAndSleep(index + 1);
              }, 200);
            }
          }

          // 从第一个数据项开始递归推送
          pushDataAndSleep(0);
          var leng = 200 * that.tableData.length;
          that.$refs.editTable.$refs.scrollBarRef.setScrollTop(leng);
        });
    },
    handleRowClick(row, column, event) {
      // 更新源IP和目标IP
      this.updateIP(row, "src");
      this.updateIP(row, "dst");
    },
    updateIP(row, ipType) {
      const ipKey = row[ipType];
      if (this.ipList[ipKey]) {
        row[ipType] = this.ipList[ipKey];
      }
    },
    switper() {
      let that = this;
      // that.getData()
      // var timerID=setInterval(()=>that.getData(), 3000)

      // that.getAppendData();
      setInterval(() => that.getAppendData(), 3000);
    },
  },
  mounted() {
    this.getList();
    this.switper();
  },
};
</script>

<style lang="scss" scoped>
@import "./table.scss";
.textstyle {
  white-space: pre-wrap;
  font-size: 20px;
  line-height: 150%;
}
</style>
